<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts v3 Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td><h2 class="pageHeader">Putting tool tip in multiple lines  </h2></td>
  </tr>
  <tr> 
    <td valign="top" class="text"><p>FusionCharts v3 allows you to put your tool tips in multiple lines with a little manual tweaking. Consider the XML below: </p>    </td>
  </tr>
  <tr>
    <td valign="top" class="codeBlock">&lt;chart&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='John' value='420' <strong>tooltext='John Miller&amp;lt;BR&amp;gt;Score: 420&amp;lt;BR&amp;gt;Rank:2'</strong>/&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Mary' value='295' <strong>tooltext='Mary Evans&amp;lt;BR&amp;gt;Score: 295&amp;lt;BR&amp;gt;Rank:3'</strong>/&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Tom' value='523' <strong>tooltext='Tom Bowler&amp;lt;BR&amp;gt;Score: 523&amp;lt;BR&amp;gt;Rank:1'</strong>/&gt; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;styles&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;definition&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style name='myHTMLFont' type='font' <strong>isHTML='1'</strong> /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/definition&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;application&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;apply <strong>toObject='TOOLTIP' styles='myHTMLFont'</strong> /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/application&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/styles&gt;<br />
&lt;/chart&gt;</td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>In the above XML, we're first setting 3 lines tool tip content for each<span class="codeInline"> &lt;set&gt;</span>. To separate each line we use the <span class="codeInline">&lt;BR&gt;</span> HTML tag. However, since XML cannot use <span class="codeInline">&lt;</span> and <span class="codeInline">&gt;</span>, so we convert<span class="codeInline"> &lt;BR&gt;</span> to <span class="codeInline">&amp;lt;BR&amp;gt;</span> . Thereafter, we need to tell FusionCharts that we'll be displaying HTML content in tool-tip. So, we create a new font style type with <span class="codeInline">isHTML</span> property set to 1 and then apply it to <span class="codeInline">TOOLTIP</span> object. </p>
    <p>When you now see the chart, you'll get the following output: </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/ToolTipMultiple.jpg" width="405" height="207" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Applying HTML to labels </td>
  </tr>
  <tr>
    <td valign="top" class="text">Similarly, if you want to use HTML in data labels, you can do it as shown below: </td>
  </tr>
  <tr>
    <td valign="top" class="codeBlock">&lt;chart&gt;<br />
      &nbsp;&nbsp;&nbsp;&lt;set label='John Miller&amp;lt;BR&amp;gt;Score: 420&amp;lt;BR&amp;gt;Rank:2' value='420' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&lt;set label='Mary Evans&amp;lt;BR&amp;gt;Score: 295&amp;lt;BR&amp;gt;Rank:3' value='295' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&lt;set label='Tom Bowler&amp;lt;BR&amp;gt;Score: 523&amp;lt;BR&amp;gt;Rank:1' value='523' /&gt; <br />
&nbsp;&nbsp;&nbsp;&lt;styles&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;definition&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style name='myHTMLFont' type='font' isHTML='1' /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/definition&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;application&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;apply toObject='DATALABELS' styles='myHTMLFont' /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;apply toObject='TOOLTIP' styles='myHTMLFont' /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/application&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;/styles&gt;<br />
&lt;/chart&gt;</td>
  </tr>
  <tr>
    <td valign="top" class="text">The above XML will now render the following chart: </td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/LabelHTML.jpg" width="407" height="206" /></td>
  </tr>
</table>
</body>
</html>
